<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">自动完成标签</h3>
        <blockquote>
            <p>本节主要介绍框架的自动完成标签。</p>
        </blockquote>
        <h4>初始化</h4>
        <ul>
            <li>Data属性：input添加属性<code>data-toggle="tags"</code>。
                <span class="label label-default">DOM示例：</span>　<input type="text" name="tags" id="A11" value="" data-toggle="tags" data-url="ajaxTags.html" data-clear="false" data-width="360" size="15" placeholder="输入关键字，回车提交"><br>
                <p>示例代码：</p>
                <pre class="brush: html">
                    &lt;input type="text" name="tags" value="" data-toggle="tags" data-url="ajaxTags.html" data-width="360" size="15" placeholder="输入关键字，回车提交">
                </pre>
            </li>
            <li>jQuery API：<br>
                <pre class="brush: js">
                    $(input).tags(options)
                </pre>
            </li>
        </ul>
        <h4>参数（options）</h4>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>默认值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>url</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[必选] <span class="badge"><i>D-Url</i></span> Ajax加载内容的URL。</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>string</td>
                    <td>GET</td>
                    <td>[可选] ajax请求方式。</td>
                </tr>
                <tr>
                    <td>tagname</td>
                    <td>string</td>
                    <td>tag</td>
                    <td>[可选] 标签隐藏域的name。</td>
                </tr>
                <tr>
                    <td>max</td>
                    <td>int</td>
                    <td>0</td>
                    <td>[可选] 允许插入几个标签，0 = 不限。</td>
                </tr>
                <tr>
                    <td>clear</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 如果ajax无返回或未在下拉菜单中选择，是否清除输入字符。</td>
                </tr>
                <tr>
                    <td>lightCls</td>
                    <td>string</td>
                    <td>tags-highlight</td>
                    <td>[可选] 标签选择菜单的高亮Class。</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>int</td>
                    <td>300</td>
                    <td>[可选] 标签区域的宽度，超过将自动换行。</td>
                </tr>
            </tbody>
        </table>
        <h4>返回JSON参数(Ajax请求URL的返回JSON)</h4>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>默认值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[必选] 标签的值。</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[必选] 标签的显示名称。</td>
                </tr>
            </tbody>
        </table>
        <h4>事件</h4>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>中文说明</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>aftercreated.bjui.tags</td>
                    <td>标签创建后的事件</td>
                    <td>监听该事件，可以在创建好一个标签后进行相关操作。</td>
                </tr>
            </tbody>
        </table>
        <p>这样监听tags的事件：<code>mytags - selector</code>表示触发自动完成标签的input选择器</p>
        <pre class="brush: js">
            $('mytags - selector').on('aftercreated.bjui.tags', function(e, data) {
                var value = data.value // 当前创建的标签值
                var item  = data.item  // 当前选定项的值(object，具体值由返回JSON决定)
                var tags  = data.tags  // 所有已生成标签的值，以英文逗号(,)分隔
                
                // do something...
            })
        </pre>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>